<template>
  <div class="app-container" v-loading="loading">
    <div class="table-title-wrap justify-end" style="background-color: #fff; width: 99%" v-if="$route.query.beFrom">
      <el-button type="primary" plain size="mini" @click="back">
        返回
      </el-button>
    </div>
    <el-row type="flex" style="justify-content: space-between">
      <div style="flex: 1; min-width: 0; margin-top: 20px">
        <div style="
						height: 100%;
						background-color: #fff;
						box-sizing: border-box;
						padding: 10px;
						margin-right: 10px;
					">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="额度申请详情" name="limit"></el-tab-pane>
            <el-tab-pane :label="
								infoData.carSourceType == '2'
									? '订单详情(辆)'
									: '订单详情(型)'
							" name="orderDetails"></el-tab-pane>
            <el-tab-pane label="合同详情" name="contract"></el-tab-pane>
            <el-tab-pane label="交车信息" name="vehicle"></el-tab-pane>
          </el-tabs>
          <keep-alive>
            <div v-if="activeName == 'limit'">
              <Details v-model="infoData" state="readonly" v-if="notEmpty(infoData)" type="preview"></Details>
            </div>
          </keep-alive>
          <div v-if="activeName == 'orderDetails'">
            <orderDetailCommon v-model="form" :carSourceType="infoData.carSourceType" />
          </div>
          <div v-if="activeName == 'contract'">
            <ectVisa v-model="form" />
          </div>
          <div v-if="activeName == 'vehicle'">
            <table-page :dataList="orderCarList" border :total="total">
              <!-- 普通列插槽 -->
              <template slot="tableCol">
                <el-table-column label="车系" align="center" prop="carSeriesName" />
                <el-table-column label="车牌号" align="center" prop="carPlateNo" />
                <el-table-column label="车架号" align="center" prop="carVinNo" />
                <el-table-column label="车辆状态" align="center" prop="orderCarStatusStr" />
                <el-table-column label="交车时间" align="center" prop="deliveryTime" />
                <el-table-column label="交车工作人员" align="center" prop="deliveryUserName" />
                <el-table-column label="保险" align="center" prop="insuranceType" />
                <el-table-column label="年检" align="center" prop="inspectionStatus" />
                <el-table-column label="所属城市" align="center" prop="carLicenseCityVal" />
                <el-table-column label="当前里程/km" align="center" prop="carMileage" />
              </template>
            </table-page>
            <table-page :dataList="dataList" border :total="total">
              <template slot="tableCol">
                <el-table-column label="品牌" align="center" prop="carBrandName" />
                <el-table-column label="车系" align="center" prop="carSeriesName" />
                <el-table-column label="车型" align="center" prop="carModelName" min-width="100px" show-overflow-tooltip />
                <el-table-column label="能源类型" align="center" prop="carPowerTypeStr" min-width="100px" show-overflow-tooltip />
                <el-table-column label="颜色" align="center" prop="appearanceColor" />
                <el-table-column label="每期租金(元)" align="center">
                  <template slot-scope="scope">
                    <span>
                      {{
												format_thousand(
													scope.row.planRent,
												)
											}}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="租期(月)" align="center" prop="planTenancyTypeStr" />
                <el-table-column label="加装费(元)" align="center" prop="attachedDecorationAmount">
                  <template slot-scope="scope">
                    <span>
                      {{
												format_thousand(
													scope.row
														.attachedDecorationAmount,
												)
											}}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="登记性质" align="center" prop="operationTypeStr" />
                <el-table-column label="批过数量" align="center" prop="quantityApproved" />
                <el-table-column label="未下单数量" align="center" prop="quantityUndelivered" />
                <el-table-column label="下单数量" align="center" prop="quantityOrder" />
              </template>
            </table-page>
          </div>
        </div>
      </div>
      <FlowRecord v-if="form.processId" :id="form.processId" />
    </el-row>
  </div>
</template>
<script>
import orderDetailCommon from './components/orderDetailCommon';
import ectVisa from './components/ectVisa';
import { getOrderDetail } from '@/api/vehicleOrder';
import Details from '@/views/quota/forecast/chunk/details_apply/index.vue';
import * as apis from '@/api/quota/forecast/edit/api.js';
export default {
  name: 'OrderDetails',
  data() {
    return {
      loading: false,
      form: {},
      infoData: {},
      dataList: [],
      orderCarList: [],
      total: 0,
      activeName: 'limit',
    };
  },
  components: {
    orderDetailCommon,
    ectVisa,
    Details,
  },
  watch: {
    '$route.query.orderId': {
      handler(val) {
        if (val) {
          this.getOrderDetail();
          this.initData();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    // this.getOrderDetail();
    // this.initData();
  },
  methods: {
    initData() {
      apis?.Details(this.$route.query.calcSchemeId)
        .then(res => {
          if (res.code == 200) {
            this.infoData = JSON.parse(
              JSON.stringify(res.data),
            );
          }
        })
        .finally(() => { });
    },
    async getOrderDetail() {
      this.loading = true;
      try {
        let res = await getOrderDetail(this.$route.query.orderId);
        console.log(res, '订单详情');
        this.loading = false;
        this.form = res.data;
        this.dataList = res.data.orderPlanList;
        this.orderCarList = res.data.orderCarList;
      } catch (error) {
        this.loading = false;
      }
    },
    handleClick() {
      // if (this.activeName == 'limit') {
      //   this.initData();
      // }
    },
    back() {
      this.$tab.closeOpenPage(this.$route);
      if (this.$route.query.isMenu) {
        this.$router.push({
          name: this.$route.query.beFrom,
          query: {
            preOrderId: this.$route.query.preOrderId,
            isMenu: this.$route.query.isMenu,
          },
        });
      } else {
        this.$router.push({
          name: this.$route.query.beFrom,
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.box_content {
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  .box {
    width: 45%;
    min-height: 300px;
    .title {
      border-left: 3px solid #3280fc;
      padding-left: 5px;
      box-sizing: border-box;
    }
    .content {
      width: 70%;
      min-height: 300px;
      margin: 0 auto;
    }
  }
}
</style>
